<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>Switchable Widgets Test</title>

<script src="../../build/packages/kissy.js"></script>
<script src="../../build/datalazyload/datalazyload-pkg.js"></script>

<script src="switchable.js"></script>

<script src="plugin-autoplay.js"></script>
<script src="plugin-effect.js"></script>
<script src="plugin-circular.js"></script>
<script src="plugin-lazyload.js"></script>
<script src="plugin-countdown.js"></script>

<script src="widget-tabs.js"></script>
<script src="widget-slide.js"></script>
<script src="widget-carousel.js"></script>
<script src="widget-accordion.js"></script>

<link rel="stylesheet" href="../../build/cssbase/base-min.css"/>
<style>
    body { padding: 20px 50px 50px; }
    h2 { margin: 30px 0 10px; font-size: 17px; }
    .loading { background: #EBF5FA url(assets/loading.gif) no-repeat 50% 50%; }

    p.code-switch { color: #09f; cursor: pointer; margin-top: 10px; }
    pre.code {
        color: #444;
        cursor: auto;
        border-left: 2px solid #7F96AA;
        margin-top: 5px;
        padding: 0 10px 20px 10px;
        font-size: 14px;
    }
</style>
</head>

<body>
<h2>Tabs - 普通标签页</h2>
<style>
    #demo1 { position: relative; width: 750px; padding-top: 29px; }
    #demo1 .ks-switchable-nav { position: absolute; left: 20px; margin-top: -29px; z-index: 99; }
    #demo1 .ks-switchable-nav li {
        float: left;
        width: 130px;
        height: 27px;
        line-height: 21px;
        text-align: center;
        background: url(assets/tabs-sprite.gif) no-repeat 0 6px;
        margin-right: 3px;
        padding-top: 8px;
        cursor: pointer;
    }
    #demo1 .ks-switchable-nav li.ks-active { background-position: 0 -40px; cursor: default; }
    #demo1 .ks-switchable-content {
        position: relative;
        height: 120px;
        padding: 20px;
        border: 1px solid #AEC7E5;
    }
</style>
<div id="demo1" class="section">
    <ul class="ks-switchable-nav">
        <li class="ks-active">标题 A</li>
        <li>标题 B</li>
        <li>标题 C</li>
        <li>标题 D</li>
        <li>标题 E</li>
    </ul>
    <div class="ks-switchable-content">
        <div>
<pre>
  - 在当前 trigger 中 mouseover/mouseout, click, focus, 不触发
  - 鼠标快速滑过非当前 trigger, 不触发
  - mouseover 到非当前 trigger, 停留时间到达延迟时，触发
  - click 或 Tab 切换到 trigger, 立即触发
  - beforeSwitch/onSwitch 事件的触发
  - 延迟的内容能正确加载
</pre>
        </div>
        <div style="display: none">内容 B</div>
        <div style="display: none">内容 C</div>
        <div style="display: none">内容 D</div>
        <div style="display: none">
            <textarea class="ks-datalazyload-custom">
                我是延迟内容
                <script>alert('我是延迟内容中的脚本，仅在第一次加载时执行。');</script>
            </textarea>
        </div>
    </div>
</div>
<script>
    KISSY.ready(function(S) {
        var tabs = new S.Tabs('#demo1');

        tabs.on('beforeSwitch', function(ev) {
            var index = ev.toIndex;
            if (index !== 0 && index !== 4) { // 不改变第 1 个和第 5 个 Panel 的内容
                this.panels[index].innerHTML = 'index = ' + index;
            }
        });
    });
</script>
<p class="code-switch">显示源码</p>

<h2>Slide - 淘宝首页卡盘</h2>
<style>
    #demo2 { position: relative; width: 470px; height: 150px; border: 1px solid #B6D1E6; overflow: hidden; }
    #demo2 .ks-switchable-nav { position: absolute; bottom: 5px; right: 5px; z-index: 99; }
    #demo2 .ks-switchable-nav li {
        float: left;
        width: 16px;
        height: 16px;
        line-height: 16px;
        margin-left: 3px;
        background-color: #FCF2CF;
        border: 1px solid #F47500;
        color: #D94B01;
        text-align: center;
        cursor: pointer;
    }
    #demo2 .ks-switchable-nav li.ks-active {
        width: 18px;
        height: 18px;
        line-height: 18px;
        margin-top: -1px;
        color: #FFF;
        background-color: #FFB442;
        font-weight: bold;
    }
    #demo2 .ks-switchable-content li { height: 150px; width: 470px; overflow: hidden; }
    /* for countdown plugin */
    #demo2 .ks-switchable-nav li,
    #demo2 .ks-switchable-trigger-content {
        position: relative;
    }
    #demo2 .ks-switchable-trigger-mask {
        position: absolute;
        right: 0;
        width: 18px;
        height: 18px;
        background-color: #FF9415;
        visibility: hidden
    }
    #demo2 .ks-active .ks-switchable-trigger-mask {
        visibility: visible
    }
</style>
<div id="demo2" class="section loading">
    <ol class="ks-switchable-content">
        <li><a href="http://ju.atpanel.com/?url=http://www.taobao.com/go/act/discount/hdfk091222.php?ad_id=&amp;am_id=&amp;cm_id=1400213687422f80dd4d&amp;pm_id=150021371293fce706af" target="_blank"><img alt="" src="http://img05.taobaocdn.com/tps/i5/T1HllqXjXpXXXXXXXX-470-150.jpg"/></a></li>
        <li class="hidden"><a target="_blank" href="http://click.mz.simba.taobao.com/cc_mt?p=&amp;s=24760534&amp;e=%2FzU1KBMrzT1jMRVFtqDNyn1tgJqIJA3Hy9QloO7MbgHOIBqxgkWBGKUTW8JURsTh01ynhY4RKTMplHfnVnxiYajw5JHBVqSAXBrj%2Bf%2BTLVcq5t6PSe6eCT%2F8Tn1KGQ46A85BMYIsMXzYy8dzkPxQZCyLyt0ostjNaENU1Z0QCSZaXSgNYtb%2FwhYogN3jOrIE2Q9NE12H0Hk111VWqQddJzvjKwdymURFo%2BK2etf0wTrlhYBv%2B5sdunm4S3KBeGdooeLPkaQt4Mg4u3TgCNezGX1Mh9B64cCdF8VN3SsQNW%2BgArkM4F%2BFplGwl1UuyTCLtMOb3cgDCxBQldTmR3mwFhNV09QNPjZ2bUxM3CBHkfb2wyn42y1yjjwMVjNQnmpt4NEtPh%2F5PsbupFa6ZZ2sVQdCo%2FjLJ9sf&amp;ec=ffloYVIRbFZ%2BaahPJekdUQ%3D%3D&amp;c=17016"><img alt="" width="470" height="150" border="0" src="http://img.alimama.cn/bcrm/adboard/picture/2009-12-24/091224170529.gif"/></a></li>
        <li class="hidden"><a target="_blank" href="http://click.mz.simba.taobao.com/cc_mt?p=&amp;s=24760534&amp;e=%2FzU1KBMrzT1jMRVFtqDNyn1tgJqIJA3Hy9QloO7MbgHOIBqxgkWBGKUTW8JURsTh01ynhY4RKTMplHfnVnxiYajw5JHBVqSAXBrj%2Bf%2BTLVcq5t6PSe6eCT%2F8Tn1KGQ46A85BMYIsMXzYy8dzkPxQZCyLyt0ostjNaENU1Z0QCSZaXSgNYtb%2FwhYogN3jOrIE2Q9NE12H0Hk111VWqQddJzvjKwdymURFo%2BK2etf0wTrlhYBv%2B5sdunm4S3KBeGdooeLPkaQt4Mg4u3TgCNezGX1Mh9B64cCdF8VN3SsQNW%2BgArkM4F%2BFplGwl1UuyTCLtMOb3cgDCxBQldTmR3mwFhNV09QNPjZ2bUxM3CBHkfb2wyn42y1yjjwMVjNQnmpt4NEtPh%2F5PsbupFa6ZZ2sVQdCo%2FjLJ9sf&amp;ec=ffloYVIRbFZ%2BaahPJekdUQ%3D%3D&amp;c=17016"><img alt="" width="470" height="150" border="0" src="http://img.alimama.cn/bcrm/adboard/picture/2009-12-29/091229160359.jpg"/></a></li>
        <li class="hidden"><a href="http://ju.atpanel.com/?url=http://www.taobao.com/go/act/focus/nzdc_qqg2.php?TBG=7285.module-1.4&amp;ad_id=&amp;am_id=&amp;cm_id=140021305131ef184707&amp;pm_id=15002137139b40e4bba3" target="_blank"><img alt="" src="http://img01.taobaocdn.com/tps/i1/T1qS0qXhBhXXXXXXXX-470-150.jpg"/></a></li>
        <li class="hidden">
            <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="470" height="150" class="holiday-logo">
                <param name="movie" value="http://img04.taobaocdn.com/tps/i4/T1bblrXfBrXXXXXXXX.swf"/>
                <param name="quality" value="high"/>
                <param name="swfversion" value="8.0.0"/>
                <param name="wmode" value="opaque"/>
                <!--[if !IE]>-->
                <object type="application/x-shockwave-flash" data="http://img04.taobaocdn.com/tps/i4/T1bblrXfBrXXXXXXXX.swf" width="470" height="150" name="holiday-logo" class="holiday-logo">
                    <param name="wmode" value="opaque"/>
                </object>
                <!--<![endif]-->
            </object>
        </li>
    </ol>
</div>
<script>
    KISSY.ready(function(S) {
        S.Slide('#demo2', {
            effect: 'scrolly',
            easing: 'easeOutStrong',
            countdown: true,
            countdownFromStyle: 'width:18px'
        });
    });
</script>
<p class="code-switch">显示源码</p>

<h2>Slide - 有啊首页卡盘</h2>
<style>
    #demo3 {
        position: relative;
        width: 515px;
        height: 220px;
        border: 1px solid #D3D2D2;
        padding: 1px;
        overflow: hidden;
    }
    #demo3 .yslider-stick {
        position: absolute;
        top: 0;
        right: 0;
        width: 106px;
        font-size: 14px;
        background: #fff;
        margin: 1px;
        z-index: 99;
    }
    #demo3 .yslider-stick li {
        border-bottom: 1px solid #EDEDED;
    }
    #demo3 .yslider-stick li a {
        display: block;
        text-indent: 15px;
        padding: 8px 5px;
        color: #666;
    }
    #demo3 .yslider-stick li.selected {
        background-color: #C8282B;
    }
    #demo3 .yslider-stick li.selected a {
        color: #fff;
        border-left: 3px solid #B30024;
    }
    #demo3 .yslider-stage {
        height: 220px;
        width: 405px;
    }
</style>
<div id="demo3" class="section">
    <div class="yslider-stage">
        <p><a href="http://co.youa.baidu.com/content/promo/zhongjimiaoshazong/index.html" target="_blank"><img width="405" height="220" alt="终极秒杀场" src="http://co.youa.baidu.com/picture/r/image/2009-12-25/236d430f443d05925ad7291d9ad6b560.jpg"/></a></p>
        <p><a href="http://youa.baidu.com/zc" target="_blank"><img width="405" height="220" alt="9折话费" src="http://co.youa.baidu.com/picture/r/image/2009-12-25/4b2e801b6d174648ec77678d4a9f32e8.jpg"/></a></p>
        <p><a href="http://co.youa.baidu.com/content/lottery/chrislotact/index.html?c=676" target="_blank"><img  width="405" height="220" alt="彩票大派送" src="http://co.youa.baidu.com/picture/r/image/2009-12-21/eb76df2598316e6b5e52cd94ae2e3f1b.jpg"/></a></p>
        <p><a href="http://co.youa.baidu.com/content/promo/nianzhongjihe/index.html" target="_blank"><img  width="405" height="220" alt="限量抢购" src="http://co.youa.baidu.com/picture/r/image/2009-12-25/cc60334e6a75fab260e680cfc2b35ea7.jpg"/></a></p>
        <p><a href="http://youa.baidu.com/shop/3710a13d15c375285841ef08/tab/0344b67328e77dc92132cad9" target="_blank"><img  width="405" height="220" alt="周末购" src="http://co.youa.baidu.com/picture/r/image/2009-12-27/74538ac61dc0836f5d40d29b181868fc.jpg"/></a></p>
        <p><a href="http://co.youa.baidu.com/content/promo/xmas09/index.html?c=740" target="_blank"><img  width="405" height="220" alt="年终风暴" src="http://co.youa.baidu.com/picture/r/image/2009-12-23/d69f75d92daf625053bd0f92f2b5e586.jpg"/></a></p>
    </div>
    <ul class="yslider-stick">
        <li class="selected"><a href="http://co.youa.baidu.com/content/promo/xmas09/index.html?c=740" target="_blank">年终风暴</a></li>
        <li><a href="http://co.youa.baidu.com/content/promo/zhongjimiaoshazong/index.html" target="_blank">终极秒杀场</a></li>
        <li><a href="http://youa.baidu.com/zc" target="_blank">9折话费</a></li>
        <li><a href="http://co.youa.baidu.com/content/lottery/chrislotact/index.html?c=676" target="_blank">彩票大派送</a></li>
        <li><a href="http://co.youa.baidu.com/content/promo/nianzhongjihe/index.html" target="_blank">限量抢购</a></li>
        <li><a href="http://youa.baidu.com/shop/3710a13d15c375285841ef08/tab/0344b67328e77dc92132cad9" target="_blank">周末购</a></li>
    </ul>
</div>
<script>
    KISSY.ready(function(S) {
        S.Slide('#demo3', {
            navCls: 'yslider-stick',
            contentCls: 'yslider-stage',
            activeTriggerCls: 'selected',
            delay: .2,
            effect: 'fade',
            easing: 'easeBoth',
            duration: .8,
            autoplay: false
        });
    });
</script>
<p class="code-switch">显示源码</p>

<h2>Carousel - 旋转木马</h2>
<style>
    .scrollable {
        position: relative;
        width: 820px;
    }
    .scrollable .prev, .scrollable .next {
        position: absolute;
        top: 50px;
        color: #666;
        cursor: pointer;
    }
    .scrollable .prev { left: 10px; }
    .scrollable .next { right: 10px; }
    .scrollable .disable { color: #ddd; cursor: default; }

    .scrollable .ks-switchable-nav {
        position: absolute;
        right: 30px;
        top: -10px;
    }
    .scrollable .ks-switchable-nav li {
        float: left;
        padding: 5px;
        font-size: 18px;
        cursor: pointer;
    }
    .scrollable .ks-switchable-nav li.ks-active {
        color: #C8282B;
    }

    .scroller {
        position: relative;
        width: 680px;
        height: 120px;
        border: 1px solid #ccc;
        background-color: #F9F9F9;
        margin: auto;
        overflow: hidden;
    }
    .scroller .ks-switchable-content img {
        float: left;
        width: 100px;
        height: 75px;
        padding: 2px;
        margin: 20px 15px;
        background-color: #fff;
        border: 1px solid #ccc;
        display: inline !important; /* fix ie6 双边距 bug */
    }
</style>
<div id="demo4" class="section scrollable">
    <span id="scroller-prev" class="prev disable">&lsaquo; 上一页</span>
    <span id="scroller-next" class="next">下一页 &rsaquo;</span>
    <div class="scroller">
        <div class="ks-switchable-content">
            <!-- 1-5 -->
            <img alt="" src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg"/>
            <img alt="" src="http://farm4.static.flickr.com/3089/2796719087_c3ee89a730_t.jpg"/>
            <img alt="" src="http://farm1.static.flickr.com/79/244441862_08ec9b6b49_t.jpg"/>
            <img alt="" src="http://farm1.static.flickr.com/28/66523124_b468cf4978_t.jpg"/>
            <img alt="" src="http://farm1.static.flickr.com/164/399223606_b875ddf797_t.jpg"/>
            <!-- 5-10 -->
            <img alt="" data-ks-lazyload-custom="http://farm1.static.flickr.com/163/399223609_db47d35b7c_t.jpg"/>
            <img alt="" data-ks-lazyload-custom="http://farm1.static.flickr.com/135/321464104_c010dbf34c_t.jpg"/>
            <img alt="" data-ks-lazyload-custom="http://farm1.static.flickr.com/40/117346184_9760f3aabc_t.jpg"/>
            <img alt="" data-ks-lazyload-custom="http://farm1.static.flickr.com/153/399232237_6928a527c1_t.jpg"/>
            <img alt="" data-ks-lazyload-custom="http://farm1.static.flickr.com/50/117346182_1fded507fa_t.jpg"/>
            <!-- 10-15 -->
            <img alt="" data-ks-lazyload-custom="http://farm4.static.flickr.com/3629/3323896446_3b87a8bf75_t.jpg"/>
            <img alt="" data-ks-lazyload-custom="http://farm4.static.flickr.com/3023/3323897466_e61624f6de_t.jpg"/>
            <img alt="" data-ks-lazyload-custom="http://farm4.static.flickr.com/3650/3323058611_d35c894fab_t.jpg"/>
            <img alt="" data-ks-lazyload-custom="http://farm4.static.flickr.com/3635/3323893254_3183671257_t.jpg"/>
            <img alt="" data-ks-lazyload-custom="http://farm4.static.flickr.com/3624/3323893148_8318838fbd_t.jpg"/>
        </div>
        <ul class="ks-switchable-nav">
            <li class="ks-active">&bull;</li>
            <li>&bull;</li>
            <li>&bull;</li>
        </ul>
    </div>
</div>
<script>
    KISSY.ready(function(S) {

        var carousel = new S.Carousel('#demo4', {
            effect: 'scrollx',
            easing: 'easeOutStrong',
            steps: 5,
            viewSize: [680],
            circular: false,
            prevBtnCls: 'prev',
            nextBtnCls: 'next',
            disableBtnCls: 'disable',
            lazyDataType: 'img-src'
        });

        carousel.on('itemSelected', function(ev) {
            alert('I am selected. src = ' + ev.item.src);
        });
    });
</script>
<p class="code-switch">显示源码</p>

<h2>Slide - 有啊滚动新闻条</h2>
<style>
    .scroll-news { height: 20px; overflow: hidden; }
    .scroll-news a { color: #FF7E00; }
</style>
<div id="demo5" class="scroll-news">
    <ul class="news-items">
        <li><a target="_blank" href="http://youa.baidu.com/shop/72e01b38fb26b4ebc5db0136">“一分钱”轻松体验有啊网购流程</a></li>
        <li><a target="_blank" href="http://co.youa.baidu.com/content/payhelp/b12/zhaoshang/">开通网银，百付宝为您一路护航</a></li>
        <li><a target="_blank" href="http://co.youa.baidu.com/picture/r/mall/guide/index.html">新手买家？帮助教程带您走通有啊</a></li>
        <li><a target="_blank" href="http://youa.baidu.com/static/help/quality_form_build.html">尽情挥洒你的创意，共建百度有啊</a></li>
        <li><a target="_blank" href="http://co.youa.baidu.com/content/help/A10/2008-09-06/153433185574.html">认准标识，精选实力卖家任您选择</a></li>
        <li><a target="_blank" href="http://co.youa.baidu.com/content/help/A3/2/2008-09-01/143723181295.html#10">收藏</a> + <a target="_blank" href="http://co.youa.baidu.com/content/help/A3/2009-01-08/112820209991.html">购物车</a>，逛街搜店更便捷</li>
    </ul>
</div>
<script>
    KISSY.ready(function(S) {
        S.Slide('#demo5', {
            contentCls: 'news-items',
            hasTriggers: false,
            effect: 'scrolly',
            easing: 'easeOutStrong',
            interval: 3,
            duration: .2
        });
    });
</script>
<p class="code-switch">显示源码</p>

<h2>Slide - 土豆今日焦点</h2>
<style>
    #slideFocus { border: 1px solid #C2C2C2; height: 284px; width: 678px; overflow: hidden; }
    #slideFocus .h { background: #f3f3f3; padding: 3px 0 7px 12px; }
    #slideFocus .c { padding: 9px 10px 0; }
    #slideFocus .pic { width: 379px; height: 233px; overflow: hidden; float: left; }
    #slideFocus .txt { width: 270px; float: right; }
    #slideFocus .desc-list h4 a { font-size: 14px; line-height: 25px; color: #f60; }
    #slideFocus .desc-list p { height: 55px; line-height: 18px; color: #666; overflow: hidden; margin: 10px 0; }
    #slideFocus .thumbs-list li { float: left; height: 62px; width: 84px; padding: 2px; margin: 1px; display: inline !important; }
    #slideFocus .thumbs-list li.current { background-color: #f60; }
</style>
<div id="slideFocus">
    <div class="h">
        <h3>今日焦点视频</h3>
    </div>
    <div class="c">
        <div class="pic loading">
            <ul class="pic-list">
                <li><a href="#"><img alt="" src="http://at-img4.tdimg.com/board/2010/1/2235.jpg"/></a></li>
                <li><a href="#"><img alt="" src="http://at-img3.tdimg.com/board/2010/1/2_5.jpg"/></a></li>
                <li><a href="#"><img alt="" src="http://at-img4.tdimg.com/board/2010/1/tt.jpg"/></a></li>
                <li><a href="#"><img alt="" src="http://at-img2.tdimg.com/board/2009/12/avatarchina.jpg"/></a></li>
                <li><a href="#"><img alt="" src="http://at-img1.tdimg.com/board/2009/12/0101jyu-daxue379.jpg"/></a></li>
                <li><a href="#"><img alt="" src="http://at-img2.tdimg.com/board/2010/1/24_1.jpg"/></a></li>
            </ul>
        </div>
        <div class="txt">
            <ul class="desc-list">
                <li style="display: block">
                    <h4><a title="《神话》热播 第05集21:10分上线" target="_blank" href="http://www.tudou.com/home/_53991369">《神话》热播 第05集21:10分上线</a></h4>
                    <p>秦代的刑场上，一个身着奇装异服的年轻人从天而降，众将士议论纷纷，不敢近前，不知是叛贼来劫法场，还是神仙妖孽下凡……</p>
                </li>
                <li style="display: none">
                    <h4><a target="_blank" href="http://www.tudou.com/playlist/playindex.do?lid=7684460&amp;iid=44145734&amp;cid=3">2010年第一场强降雪飘落京城</a></h4>
                    <p>继昨日凌晨降下新年首场小雪，今日首场强降雪飘落京城，据气象台预计雪后北京将降温至-16℃，这也将创下近40年来的最低温记录。</p>
                </li>
                <li style="display: none">
                    <h4><a target="_blank" href="http://www.tudou.com/playlist/playindex.do?lid=7683893">娱乐圈丑闻 导演张一白吸毒被抓</a></h4>
                    <p>正拍摄《杜拉拉升职记》的导演张一白因吸毒被抓，据传是其捧红的徐静蕾“告密”，衣食无忧、事业有成的明星，为何屡屡曝出吸毒丑闻？</p>
                </li>
                <li style="display: none">
                    <h4><a target="_blank" href="http://www.tudou.com/home/avatar2010">詹姆斯-卡梅隆传奇巨制《阿凡达》</a></h4>
                    <p>曾因《泰坦尼克号》创造过票房记录的好莱坞导演詹姆斯-卡梅隆，经过了14年的酝酿，耗资4亿美元拍制的科幻巨献《阿凡达》将于4日在中国上映！</p>
                </li>
                <li style="display: none">
                    <h4><a target="_blank" href="http://www.tudou.com/playlist/playindex.do?lid=7637976">2009年大学生十大杯具事件</a></h4>
                    <p>从70岁老教授潜规则艺校女生，到上海贫困女硕士自杀，09年发生在大学生身上的是非真是多得来令人惊诧，除了心酸就只有“杯具”了。</p>
                </li>
                <li style="display: none">
                    <h4><a target="_blank" href="http://www.tudou.com/home/_52974690/">尚周刊 第三期</a></h4>
                    <p>全新《尚周刊》在新年里与大家新鲜见面。简约是本周最IN的街头风！闪亮派对妆是每个潮女必备美妆术！想了解更多时尚资讯来《尚周刊》！</p>
                </li>
            </ul>
            <ul class="thumbs-list">
                <li class="current"><img alt="" width="84" height="62" src="http://at-img4.tdimg.com/board/2010/1/%CA%D7%D2%B3%BD%B9%B5%E3%CD%BCs.jpg"/></li>
                <li><img alt="" width="84" height="62" src="http://at-img3.tdimg.com/board/2010/1/2_4.jpg"/></li>
                <li><img alt="" width="84" height="62" src="http://at-img4.tdimg.com/board/2010/1/tt1.jpg"/></li>
                <li><img alt="" width="84" height="62" src="http://at-img2.tdimg.com/board/2009/12/avatarchina-s.jpg"/></li>
                <li><img alt="" width="84" height="62" src="http://at-img4.tdimg.com/board/2009/12/0101jyu-82641.jpg"/></li>
                <li><img alt="" width="84" height="62" src="http://at-img1.tdimg.com/board/2010/1/4_1.jpg"/></li>
            </ul>
        </div>
    </div>
</div>
<script>
    KISSY.ready(function(S) {
        var DOM = S.DOM,
            descList = DOM.children('#slideFocus ul.desc-list');

        var slide = new S.Slide('#slideFocus', {
            contentCls: 'pic-list',
            navCls: 'thumbs-list',
            activeTriggerCls: 'current',
            effect: 'scrollx',
            easing: S.Easing.easeOutStrong
        });

        slide.on('beforeSwitch', function(ev) {
            S.each(descList, function(desc, i) {
                desc.style.display = i === ev.toIndex ? 'block' : 'none';
            });
        });
    });
</script>
<p class="code-switch">显示源码</p>

<h2>Accordion - 手风琴</h2>
<style>
    #accordion1 {width:300px;border:1px solid #ccc;}
    #accordion1 .ks-switchable-trigger{padding:3px 10px;cursor:pointer;border-bottom:1px solid #ddd;background:#f3f3f3;overflow:hidden; height: 18px;}
    #accordion1 .ks-switchable-trigger h3{float: left; width: 100px; margin-left: 5px; }
    #accordion1 .ks-switchable-panel{height:150px;padding:3px 10px;border-bottom:1px solid #ddd;}
    #accordion1 .ks-icon{float:left;width:12px;height:12px;overflow:hidden;margin-top:2px;font-size:0;vertical-align:middle;background:url(assets/accordion-sprite.png) no-repeat 0 0;}
    #accordion1 .ks-active .ks-icon{background-position:-20px 0;}
    #accordion1 .last-trigger { border-bottom-width: 0 }
    #accordion1 .ks-active { border-bottom-width: 1px }
    #accordion1 .last-panel { border-bottom: none }
</style>
<div id="accordion1" class="section">
    <div class="ks-switchable-trigger ks-active"><i class="ks-icon"></i><h3>标题A</h3></div>
    <div class="ks-switchable-panel">
        1、支持鼠标滑过和点击触点两种方式<br/>
        2、支持同时展开多个面板
    </div>
    <div class="ks-switchable-trigger"><i class="ks-icon"></i><h3>标题B</h3></div>
    <div class="ks-switchable-panel" style="display:none;">内容B<br/>内容B<br/>内容B</div>
    <div class="ks-switchable-trigger"><i class="ks-icon"></i><h3>标题C</h3></div>
    <div class="ks-switchable-panel" style="display:none;">内容C<br/>内容C<br/>内容C<br/>内容C<br/>内容C</div>
    <div class="ks-switchable-trigger last-trigger"><i class="ks-icon"></i><h3>标题D</h3></div>
    <div class="ks-switchable-panel last-panel" style="display:none;">内容D<br/>内容D<br/>内容D</div>
</div>
<script>
    KISSY.ready(function(S) {
        S.Accordion('#accordion1', { multiple: true } );
    });
</script>
<p class="code-switch">显示源码</p>

<h2>引用文件说明</h2>

<p>需要引用以下文件：</p>
<pre>
    
    kissy/build/packages/ks-core-min.js
    kissy/build/anim/anim-pkg-min.js （可选，需要动画时才需要加载）
    kissy/build/datalazyload/datalazyload-min.js (可选，需要数据延迟时才需要加载)
    kissy/build/switachable/switachable-pkg-min.js
</pre>

<script>
    (function() {
        var S = KISSY, DOM = S.DOM,
            SHOW_CODE = '显示源码', HIDE_CODE = '隐藏源码';

        S.all('p.code-switch').each(function(p) {
            p.on('click', function() {
                var showing = (p.text() === SHOW_CODE),
                    next = p.next(),
                    pre = next;

                if (next[0].nodeName !== 'PRE') {
                    pre = S.Node('<pre>');

                    pre.attr('class', 'code')
                        .html(p.prev().html());

                    if (S.UA.ie) {
                        pre.html(pre.html() + '<br />// 请用非 ie 内核浏览器查看。');
                    }

                    DOM.insertAfter(pre[0], p[0]);
                }

                pre.css('display', showing ? 'block' : 'none');
                p.html(showing ? HIDE_CODE : SHOW_CODE);
            });
        });
    })();
</script>
</body>
</html>